<template>
  <div class="postNav" @mouseleave="hidde">
    <el-row type="flex">
      <el-col>
          <ul class="nav">
              <li class="item_nav" @mouseover="show(index,item)" v-for="(item,index) in postList" :key="index">
                  <span>{{item.type}}</span>
                  <i class="el-icon-arrow-right"></i>
              </li>
            </ul>
      </el-col>
      <div v-if="shouDoun">
          <el-col  v-for="(item,index) in children" :key="index">
          <ul class="navTwo" v-if="index == indexOne">
              <li v-for="(item,index) in children" :key="index">
                  <i>{{index + 1}}</i>
                  <span class="city" @click="getCitysPost(item.city)">{{item.city}}</span>
                  <span class="title" @click="getCitysPost(item.city)">{{item.desc}}</span>
                </li>
          </ul>
      </el-col>
      </div>
    </el-row>
  </div>
</template>

<script>
export default {
    data(){
        return {
            postList:[],
            children:[],
            indexOne: null,
            shouDoun: false
        }
    },
    methods:{
        // 点击菜单触发
        getCitysPost(city){
            this.$emit('cityName',city);

        },
        // 鼠标离开时隐藏
        hidde(){
           this.shouDoun = false;
        },
        // 鼠标移入时显示
        show(index,item){
            // console.log(index)
            this.shouDoun = true;
            this.children = item.children
            this.indexOne = index

        }
    },
    mounted(){
        // 获取城市菜单列表
        this.$axios({
            url: "/posts/cities",
        }).then(res=>{
            const {data} = res.data;
            this.postList = data;
            // console.log(res)
        })
    }
};
</script>

<style lang="less" scoped>
.postNav {
    position: relative;
    .nav{
        width: 260px;
        .item_nav{
             &:hover{
                 color: #ffad00;
                 border-right: none;
             }
            padding: 0 20px;
            border: 1px solid #ddd;
            height: 41px;
            line-height: 41px;
            font-size: 14px;
        i{
           
            width: 147px;
            text-align: right;
        }
        }
        & li:nth-child(odd){
            border-bottom: none;
        }
        & li:nth-child(2){
            border-bottom: none;
        }
    }
    .navTwo{
        // display: none;
        z-index: 999;
        background-color: #fff;
        position: absolute;
        left: 260px;
        top: 0;
        // margin-left: -1px;
        width: 350px;
        height: 202px;
        border: 1px solid;
       border-color: #ddd #ddd #ddd transparent;
       & li:nth-last-child(1){
           margin-top: 4px;
           border-left: 1px solid #ddd;
       }
       li{
        padding: 0 18px;
        height: 40px;
        line-height: 40px;
        i{
            font-size: 19px;
            font-style: italic;
            color: #ffad00;
        }
        .city{
            padding: 0 10px;
            color:#ffad00;
        }
        &>span{
            font-size: 14px;
            color: #b39999;
            cursor: pointer;
            &:hover{
                 text-decoration: underline;
            }
        }

       }
    }
}
</style>